<template>
	<view class="positionListBox">
		<view class="info-item" v-for="(item, index) in positionList" :key="index">
			<navigator :url="`/pages/recruit/position-detail/index?id=${item.id}`" hover-class="none">
				<view class="list-item">
					<view class="tips">
						<view class="t1 txtHidden line-block" style="max-width: 60%;">{{item.position}}</view>
						<view class="state-box line-block" v-if="item.type == 2">兼职</view>
						<text class="t2 pull-right">{{item.salary}}</text>
					</view>
					<view class="company-box">{{item.company}}</view>
					<view class="address-box">
						<text>{{item.city || ''}}{{item.area}}</text>
						<text>{{item.experience}}</text>
						<text>{{item.education}}</text>
					</view>
					<view class="recruiter-box">
						<image :src="item.portrait"></image>
						{{ item.name }}<text style='display:inline-block;width:20rpx;text-align:center;'>·</text>{{ item.post }}
						<view class="statistics pull-right">
							{{ item.distance }}km
							<text style='display:inline-block;width:20rpx;text-align:center;'>·</text>
							{{ item.click }}人浏览
						</view>
					</view>
					<view v-if="item.time" class="bottom-box">{{item.time}}</view>
				</view>
			</navigator>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isShowOrganizer: false,
			}
		},
		props: [
			"title",
			"positionList"
		],
		methods: {
			_confirmEvent() {
				this.$emit("confirmEvent");
			}
		}
	}
</script>

<style lang="less">
	.positionListBox {
		padding: 10rpx 0;
		background: #F7F7F7;
	}

	.list-item {
		padding: 24rpx 35rpx;
		margin-bottom: 20rpx;
		background: #fff;
	}

	.list-item .tips .t1 {
		font-size: 38rpx;
		color: #101012;
		font-weight: bold;
		margin-right: 20rpx;
	}

	.list-item .tips .t2 {
		font-size: 32rpx;
		color: #E41805;
		font-weight: bold;
	}

	.company-box {
		margin-top: 24rpx;
		color: #636365;
		font-size: 30rpx;
	}

	.address-box {
		margin-top: 18rpx;
	}

	.address-box text {
		font-size: 24rpx;
		color: #666668;
		background: #F8F8FA;
		height: 40rpx;
		line-height: 40rpx;
		display: inline-block;
		margin-right: 15rpx;
		padding: 6rpx 10rpx;
		border-radius: 4rpx;
	}

	.recruiter-box {
		margin-top: 30rpx;
		color: #5E5B5E;
		font-weight: 500;
		font-size: 26rpx;
		line-height: 50rpx;
	}

	.recruiter-box image {
		width: 50rpx;
		height: 50rpx;
		border-radius: 25rpx;
		display: inline-block;
		vertical-align: top;
		margin-right: 14rpx;
	}

	.state-box {
		color: #E41805;
		font-size: 24rpx;
		height: 36rpx;
		padding: 6rpx 20rpx;
		border: 1rpx solid #E41805;
		border-radius: 8rpx;
		line-height: 36rpx;
		margin-left: 20rxp;
	}

	.bottom-box {
		padding: 30rpx 0 0;
		font-size: 24rpx;
		color: #999;
		border-top: 1rpx solid #ccc;
		margin-top: 19rpx;
	}

	.line-block {
		display: inline-block;
		vertical-align: top;
	}
</style>
